<template>
  <el-drawer
    title="推荐食谱"
    :visible.sync="drawer"
    :before-close="handleClose"
    :append-to-body='true'
    :modal='false'
    custom-class="recommendDrawer"
  >
    <el-collapse v-model="activeName">
      <el-collapse-item v-for="(recommend,index1) in recommends" :title="recommend.title" :name="recommend.name" :key="index1">
        <el-card shadow="always">
          <div v-for="(food,index2) in recommend.foods" :key="index2">
            <el-row>
              <el-col :span="6">{{food.name}}</el-col>
              <el-col :span="18">{{food.reason}}</el-col>
            </el-row>
          </div>
        </el-card>
      </el-collapse-item>
    </el-collapse>
  </el-drawer>
</template>

<script>
    export default {
        name: "Recommend",
        props:{
          recommendVisible:{
            type:Boolean,
            default:true
          }
        },
        data(){
          return {
            backgroundImage: "url(static/images/banner1.jpg)",
            drawer:true,
            activeName:'breakfast',
            recommends:[
                {title:'早餐推荐',name:'breakfast',foods:[]},
                {title:'午餐推荐',name:'lunch',foods:[]},
                {title:'晚餐推荐',name:'dinner',foods:[]}
            ]
          }
        },
        watch: {
          /*recommendVisible: function(newVal, oldVal){
          this.drawer=newVal;
        }*/
      },
      mounted(){
        this.$axios({
          url:'http://47.92.167.153:8085/user/getRecommendation',
          method:'get',
        }).then((res)=>{
          res=res.data;
          if(res.success){
            res=res.data;
            this.recommends[0].foods=res.breakfast;
            this.recommends[1].foods=res.lunch;
            this.recommends[2].foods=res.dinner;
          }
        }).catch(function(error){
          console.log(error)
        });
      },
        methods:{
          handleClose(){
            this.$confirm('是否退出推荐食谱?')
              .then(()=>{
                this.drawer=false;
              })
              .catch(_ => {});
          },
          closeDialog(){
            this.$emit('closeDialog');
          },
        }
    }
</script>

<style lang="stylus">
/*.Recommend
  overflow: auto;
  box-sizing border-box
  padding 40px*/
.recommendDrawer
  overflow: auto;
  background url("http://image.biaobaiju.com/uploads/20180802/00/1533139965-zgoIntSrHs.jpg");
  &:scrollbar
    display: none;
  >header
    &:focus
      outline:0
    >span
      font-size 35px
  >section
    .el-collapse
      opacity 0.8
      .el-collapse-item
        .el-collapse-item__header
          font-size 25px
        .el-collapse-item__content
          .el-row
            margin-bottom 10px
            >div
              font-size: 16px
              text-align: left
              &:nth-child(1)
                font-size: 18px
              &:nth-child(2)
                font-size: 14px
                margin-top: 3px;
                color #838385
</style>
